<template>
  <!--账号安全-->
  <div class="security">
    <div class="security-button">
      <el-button plain icon="el-icon-back" type="text" @click="returnHome()">主页</el-button>
      <img src="./../assets/logo.png" draggable="false">
    </div>

    <el-table :data="tableData">
      <el-table-column width="281px">
        <template slot-scope="scope">
          <template v-if="scope.row.row_data === undefined">
            <i class="el-icon-error">{{scope.row.title}}</i>
          </template>
          <template v-else>
            <i class="el-icon-success">{{scope.row.title}}</i>
          </template>
        </template>
      </el-table-column>
      <el-table-column width="281px">
        <template slot-scope="scope">
          <span v-show="scope.row.row_data === undefined">未{{scope.row.title}}</span>
          <span v-show="!(scope.row.row_data === undefined)">{{scope.row.row_data}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="operation" width="122px">
        <template slot-scope="scope">
          <span v-show="scope.row.row_data === undefined">
            <el-link :href="scope.row.operation_href">{{scope.row.title}}</el-link>
          </span>
          <span v-show="!(scope.row.row_data === undefined)">
            <el-link :href="scope.row.operation_href">{{scope.row.operation}}</el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="security-power">
      © 2021 Powered by zsc ccying
    </div>
  </div>
</template>

<style>
  .security {
    margin: auto;
    width: 45%;
  }
  .security-button {
   padding-right: 600px;
  }
  .security-power {
    padding-top: 100px;
  }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableLabel: [
          {prop: 'title'},
          {prop: 'row_data'},
          {prop: 'operation'},
          {prop: 'operation_href'}
        ],
      }
    },

    created() {
      let data = [];
      //把String转换成JSON
      let user = JSON.parse(sessionStorage.getItem('user'));
      let {email:email, password:password, mobile:mobile} = user;
      //密码和手机号注册时肯定设置
      password = "********";
      mobile = mobile.substring(0, 3) + "****" + mobile.substring(7, 11);
      data[0] = {title: '绑定邮箱', row_data: email, operation: '更换邮箱', operation_href: '/#/reset-e'};
      data[1] = {title: '设置密码', row_data: password, operation: '修改密码', operation_href: '/#/reset-p'};
      data[2] = {title: '绑定手机', row_data: mobile, operation: '更换手机', operation_href: '/#/reset-m'};
      this.tableData = data;
    },

    methods: {
      returnHome() {
        this.$router.go(-1);
      }
    }
  }
</script>
